<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
     <%@ include file="meta.jsp" %>
     <title>${site_title}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>商家注册</title>
    <script language="javascript" type="text/javascript" src="js/ccbcc.js"></script>
    <script language="javascript" type="text/javascript">
	<!--
		function trim(str){
			 return str.replace(/(^\s*)|(\s*$)/g, "");
		}
	
		function validateEle(id) {
			var obj = $("#" + id);
			if(obj.val() == "") {
				obj.addClass("error");
				obj.parent().parent().addClass("error");
				obj.focus();
				return false;	
			} else {
				obj.removeClass("error");
				obj.parent().parent().removeClass("error");
				return true;	
			}
		}
		
		$(document).ready(function(e) {
			var errcode = "${param.errcode}";
			if(errcode != "") {
				if(errcode == "101") {
					$(".must-flag").html("帐号已经被使用，请重新输入帐号.");
				}
			}
			if("${param.username}" != "") {
				$("#username").val("${param.username}");
			}
			
           $("#submitBtn").bind("click", function(){
				if(!validateEle("username") || !validateEle("password") || !validateEle("confirm_pwd")) {
					return false;
				}
				if(!/^[a-zA-Z]{1,}$/.test($("#username").val())) {
					$(".must-flag").html("帐号必须是字母组成.");
					return false;
				}
				if($("#password").val() != $("#confirm_pwd").val()) {
					$("#confirm_pwd").addClass("error");
					$("#confirm_pwd").parent("div").parent("div").find("span").addClass("labelError");
					$(".must-flag").html("密码与确认密码不一致.");
					return false;
				} else {
					$("#confirm_pwd").removeClass("error");
					$("#confirm_pwd").parent("div").parent("div").find("span").removeClass("labelError");
					$(".must-flag").html("");
				}
				if(!validateEle("name") || !validateEle("contact") || !validateEle("phone")) {
					return false;
				}
				if($("#licenseFile").val() == '') {
					$(".must-flag").html("请上传营业职照.");
					return false;	
				}
				if($("#legalFile").val() == '') {
					$(".must-flag").html("法人身份证头部照.");
					return false;	
				}
				return true;		
			});
        });
	-->
 	</script>
</head>
<body>
	<div id="header"></div>
   <div id="container" class="container radius shadow" style="width:600px;border: 1px solid #DDD;">
        <h3 style="display:block;text-align:center;">商家注册</h3>
        <form id="regForm" name="regForm" method="post" action="trader.action.jsp?action=register" enctype="multipart/form-data" class="form-horizontal">
            <!-- 用户信息 -->
            <div class="control-group">
                <label class="control-label">帐号</label>
                <div class="controls">
                    <input id="username" name="username" type="text" maxlength="50" onChange="validateEle('username');" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">密码</label>
                <div class="controls">
                   <input id="password" name="password" type="password" maxlength="50" onChange="validateEle('password');" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">确认密码</label>
                <div class="controls">
                    <input id="confirm_pwd" name="confirm_pwd" type="password" maxlength="50" onChange="validateEle('confirm_pwd');" />
                </div>
            </div>

			<div style="height:30px">&nbsp;</div>
			
             <!-- 商家信息 -->
			 <div class="control-group">
                <label class="control-label">企业名称</label>
                <div class="controls">
                   <input id="name" name="name" type="text" maxlength="50" onChange="validateEle('name');" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">负责人</label>
                <div class="controls">
                    <input id="contact" name="contact" type="text" maxlength="50" onChange="validateEle('contact');" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">联系电话</label>
                <div class="controls">
                   <input id="phone" name="phone" type="text" maxlength="50" onChange="validateEle('phone');" />
                </div>
            </div>
          
            <div style="height:30px">&nbsp;</div>
            
             <!-- 审核资料 -->
              <div class="control-group">
                <label class="control-label">营业职照</label>
                
                <div class="controls">
                    <div style="width:50%; float:left;" id="lecenseDiv">
                    	<div id="img_preview" class="default-img left"><img src="${ctx}/images/license.jpg" /></div>
                        <div id="del_btn" onclick="delImage(this);" class="left" style="cursor:pointer;z-index:1000;display:none;margin:-4px 0 0 -8px;">
                            <img align="absmiddle" title="删除图片" style="width:20px;height:20px;" src="${ctx}/images/close.png">
                        </div>
                     </div>
                    <div style="width:50%; float:left;"><img src="images/license_demo.jpg" /></div>
                    <div style="width:100%; float:left;">
                        <a href="javascript:void(0);" rel="tooltip" data-original-title="请选择2M以内的.jpg|.gif|.png文件" class="input-file btn"
                        	style="margin-left:30px; margin-top:5px;">
                            <input type="file" id="licenseFile" name="licenseFile" onchange="previewImage(this,'img_preview',100,80,imgPreview)" accept="image/*" />
                            <i class="icon icon-picture"></i> 选择图片
                        </a>
                    </div>
                </div>
             </div>
              <div class="control-group">
                <label class="control-label">法人身份证头部照</label>
                <div class="controls">
                    <div style="width:50%; float:left;">
                    	<div id="img_preview2" class="default-img left"><img src="${ctx}/images/legal.jpg" /></div>
                        <div id="del_btn2" onclick="delImage2(this);" class="left" style="cursor:pointer;z-index:1000;display:none;margin:-4px 0 0 -8px;">
                            <img align="absmiddle" title="删除图片" style="width:20px;height:20px;" src="${ctx}/images/close.png">
                        </div>
                     </div>
                    <div style="width:50%; float:left;"><img src="images/license_demo.jpg" /></div>
                    <div style="width:100%; float:left;">
                        <a href="javascript:void(0);" rel="tooltip" data-original-title="请选择2M以内的.jpg|.gif|.png文件" class="input-file btn"
                        	style="margin-left:30px; margin-top:5px;">
                            <input type="file" id="legalFile" name="legalFile" onchange="previewImage(this,'img_preview2',100,80,imgPreview2)" accept="image/*" />
                            <i class="icon icon-picture"></i> 选择图片
                        </a>
                    </div>
                </div>
             </div>
             
              <div style="height:30px">&nbsp;</div>
             
              <div class="must-flag" style="text-align:center; display:block;"></div>
             
             <div class="control-group">
                <label class="control-label"></label>
                <div class="controls">
                  <input id="submitBtn" type="submit" value="提交审核" style="width:80%; line-height:30px;" />
                </div>
            </div>
        </form>
     </div>	
</body>
<script language="javascript" type="text/javascript">
	/**图片验证**/
    function imgPreview(){
        if($("#licenseFile").validata("blankOrImage")){
            $("#del_btn").show();
            return true;
        }
    	return false;
    }


    /**图片删除**/
    function delImage(ele){
		$("#img_preview img").attr("src","${ctx}/images/license.jpg");
		$("#licenseFile").val("");
		$(ele).hide();
    }
	
	/**图片验证**/
    function imgPreview2(){
        if($("#legalFile").validata("blankOrImage")){
            $("#del_btn2").show();
            return true;
        }
    	return false;
    }


    /**图片删除**/
    function delImage2(ele){
		$("#img_preview2 img").attr("src","${ctx}/images/legal.jpg");
		$("#legalFile").val("");
		$(ele).hide();
    }
</script>
</html>